<template>
  <div class="sale-ranking">
    <p class="title">各区域风险信息汇总统计排名</p>
    <ul class="ranking-list">
      <li v-for="(item, index) in dangerData" :key="index">
        <span>{{index + 1}}. {{item.name}}</span>
        <span>{{item.number}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['dangerData'],
    data() {
      return {
        
      }
    },
    mounted() {
      // console.log('88888888888',this.zpData)
    }
  }
</script>

<style scoped="scoped">
  .sale-ranking {
    position: relative;
     height: 25vh;
     padding: 10px 15px;
     padding-top: 30px;
     overflow: hidden;
     background-image: url(../asset/border.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
   }
   .sale-ranking .title {
      position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 30px;
     line-height: 30px;
     font-size: 12px;
     color: #cee8f1;
     text-align: center;
   }
   .ranking-list {
     height: 100%;
     color: #a3d4f5;
     overflow: auto;
   }
   .ranking-list li {
     display: flex;
     justify-content: space-between;
     list-style: none;
     padding: 4px 0;
     font-size: 10px;
     /* border-bottom: 1px solid #124e98; */
   }
   .ranking-list::-webkit-scrollbar {
   width: 0px;
  }
   .ranking-list::-webkit-scrollbar-track {
   background-color:rgba(0,0,0,0.1);
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius:2em;
  }
   .ranking-list::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: rgba(0,0,0,0.1);
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius:2em;
  }
</style>
